<template>
  <ResponsiveLayout 
    layout="default" 
    :show-sidebar="false" 
    :safe-area="true"
    content-padding="16px"
  >
    <!-- 移动端导航 -->
    <MobileNavigation
      v-if="isMobile"
      :title="'通知中心'"
      :show-back="true"
      @back="$router.go(-1)"
    >
      <template #nav-right>
        <el-button type="text" @click="showSettingsDialog = true" size="small">
          <el-icon><Setting /></el-icon>
        </el-button>
      </template>
    </MobileNavigation>

    <!-- 桌面端头部 -->
    <template #header>
      <header v-if="!isMobile" class="notification-header">
        <div class="header-content">
          <div class="header-left">
            <el-button type="text" @click="$router.go(-1)" class="back-btn">
              <el-icon><ArrowLeft /></el-icon>
              返回
            </el-button>
            <h1>通知中心</h1>
          </div>
          <div class="header-right">
            <el-button type="text" @click="showSettingsDialog = true">
              <el-icon><Setting /></el-icon>
              设置
            </el-button>
          </div>
        </div>
      </header>
    </template>

    <!-- 主要内容区域 -->
    <div class="notification-container" :class="{ 'mobile-layout': isMobile }">
      <!-- 加载状态 -->
      <div v-if="loading" class="notification-loading">
        <SkeletonLoader type="list" :count="5" />
      </div>
      
      <!-- 主要内容 -->
      <div v-else>
        <!-- 统计卡片 -->
        <section class="stats-section">
          <div class="stats-grid">
            <div class="stat-card total">
              <div class="stat-icon">
                <el-icon size="24"><Bell /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ totalCount }}</div>
                <div class="stat-label">总通知</div>
              </div>
            </div>
            <div class="stat-card unread clickable" @click="handleUnreadCardClick">
              <div class="stat-icon">
                <el-icon size="24"><Message /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ unreadCount }}</div>
                <div class="stat-label">未读</div>
              </div>
            </div>
            <div class="stat-card high-priority">
              <div class="stat-icon">
                <el-icon size="24"><Warning /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ highPriorityCount }}</div>
                <div class="stat-label">高优先级</div>
              </div>
            </div>
          </div>
        </section>

        <!-- 操作栏 -->
        <section class="actions-section">
          <div class="actions-bar">
            <div class="filter-group">
              <el-select v-model="filterType" placeholder="通知类型" clearable size="small" style="width: 120px">
                <el-option label="全部" value="" />
                <el-option label="系统通知" value="SYSTEM" />
                <el-option label="预约通知" value="APPOINTMENT" />
                <el-option label="健康提醒" value="HEALTH" />
                <el-option label="分析报告" value="ANALYSIS" />
                <el-option label="症状评估" value="SYMPTOM" />
                <el-option label="用药提醒" value="REMINDER" />
                <el-option label="紧急通知" value="EMERGENCY" />
              </el-select>
              
              <el-select v-model="filterPriority" placeholder="优先级" clearable size="small" style="width: 100px">
                <el-option label="全部" value="" />
                <el-option label="紧急" value="URGENT" />
                <el-option label="高" value="HIGH" />
                <el-option label="普通" value="NORMAL" />
                <el-option label="低" value="LOW" />
              </el-select>
              
              <el-select v-model="filterRead" placeholder="阅读状态" clearable size="small" style="width: 100px">
                <el-option label="全部" value="" />
                <el-option label="未读" :value="false" />
                <el-option label="已读" :value="true" />
              </el-select>
            </div>
            
            <div class="action-group">
              <el-button 
                type="primary" 
                size="small" 
                @click="markAllAsRead"
                :disabled="unreadCount === 0"
              >
                全部已读
              </el-button>
              <el-button 
                type="danger" 
                size="small" 
                @click="batchDelete"
                :disabled="selectedNotifications.length === 0"
              >
                批量删除
              </el-button>
            </div>
          </div>
        </section>

        <!-- 通知列表 -->
        <section class="notifications-section">
          <div v-if="notifications.length === 0" class="empty-state">
            <el-empty description="暂无通知" />
          </div>
          
          <div v-else class="notifications-list">
            <div 
              v-for="notification in notifications" 
              :key="notification.id"
              class="notification-item"
              :class="{
                'unread': !notification.isRead,
                'high-priority': ['HIGH', 'URGENT'].includes(notification.priority),
                'selected': selectedNotifications.includes(notification.id)
              }"
              @click="handleNotificationClick(notification)"
            >
              <div class="notification-checkbox">
                <el-checkbox 
                  v-model="selectedNotifications" 
                  :label="notification.id"
                  @click.stop
                />
              </div>
              
              <div class="notification-icon">
                <el-icon :size="20">
                  <component :is="getNotificationIcon(notification.type)" />
                </el-icon>
              </div>
              
              <div class="notification-content">
                <div class="notification-header">
                  <h4 class="notification-title">{{ notification.title }}</h4>
                  <div class="notification-meta">
                    <el-tag 
                      :type="getPriorityType(notification.priority)" 
                      size="small"
                    >
                      {{ getPriorityText(notification.priority) }}
                    </el-tag>
                    <span class="notification-time">{{ formatTime(notification.createdAt) }}</span>
                  </div>
                </div>
                
                <p class="notification-text">{{ notification.content }}</p>
                
                <div class="notification-footer">
                  <el-tag size="small" effect="plain">
                    {{ getTypeText(notification.type) }}
                  </el-tag>
                  <div class="notification-actions">
                    <el-button 
                      v-if="!notification.isRead" 
                      type="text" 
                      size="small" 
                      @click.stop="markAsRead(notification.id)"
                    >
                      标记已读
                    </el-button>
                    <el-button 
                      type="text" 
                      size="small" 
                      @click.stop="deleteNotification(notification.id)"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 分页 -->
          <div v-if="total > pageSize" class="pagination-wrapper">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </section>
      </div>
    </div>

    <!-- 通知详情对话框 -->
    <el-dialog
      v-model="showDetailDialog"
      :title="selectedNotification?.title"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-if="selectedNotification" class="notification-detail">
        <div class="detail-header">
          <div class="detail-meta">
            <el-tag :type="getPriorityType(selectedNotification.priority)">
              {{ getPriorityText(selectedNotification.priority) }}
            </el-tag>
            <el-tag effect="plain">
              {{ getTypeText(selectedNotification.type) }}
            </el-tag>
            <span class="detail-time">{{ formatTime(selectedNotification.createdAt) }}</span>
          </div>
        </div>
        
        <div class="detail-content">
          <p>{{ selectedNotification.content }}</p>
          
          <div v-if="selectedNotification.data" class="detail-data">
            <h4>附加信息</h4>
            <pre>{{ formatData(selectedNotification.data) }}</pre>
          </div>
        </div>
        
        <div class="detail-footer">
          <div class="detail-status">
            <span>状态：{{ selectedNotification.isRead ? '已读' : '未读' }}</span>
            <span v-if="selectedNotification.readAt">阅读时间：{{ formatTime(selectedNotification.readAt) }}</span>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDetailDialog = false">关闭</el-button>
          <el-button 
            v-if="selectedNotification && !selectedNotification.isRead" 
            type="primary" 
            @click="markAsReadAndClose"
          >
            标记已读
          </el-button>
          <el-button 
            v-if="selectedNotification?.actionUrl" 
            type="success" 
            @click="handleAction"
          >
            查看详情
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 设置对话框 -->
    <el-dialog
      v-model="showSettingsDialog"
      title="通知设置"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="notification-settings">
        <el-form :model="settings" label-width="120px">
          <el-form-item label="网页通知">
            <el-switch v-model="settings.webNotifications" />
          </el-form-item>
          <el-form-item label="邮件通知">
            <el-switch v-model="settings.emailNotifications" />
          </el-form-item>
          <el-form-item label="短信通知">
            <el-switch v-model="settings.smsNotifications" />
          </el-form-item>
          <el-form-item label="推送通知">
            <el-switch v-model="settings.pushNotifications" />
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showSettingsDialog = false">取消</el-button>
          <el-button type="primary" @click="saveSettings">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </ResponsiveLayout>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { useResponsive } from '../utils/responsive'
import { ElMessage, ElMessageBox } from 'element-plus'
import ResponsiveLayout from '../components/ResponsiveLayout.vue'
import MobileNavigation from '../components/MobileNavigation.vue'
import SkeletonLoader from '../components/SkeletonLoader.vue'
import {
  Bell,
  Message,
  Warning,
  Setting,
  ArrowLeft,
  Calendar,
  Document,
  DocumentChecked,
  ChatDotRound,
  Clock,
  WarningFilled,
  InfoFilled
} from '@element-plus/icons-vue'
import * as notificationApi from '../api/notification'

const router = useRouter()
const userStore = useUserStore()
const { isMobile } = useResponsive()

// 页面状态
const loading = ref(true)
const notifications = ref([])
const selectedNotifications = ref([])
const showDetailDialog = ref(false)
const showSettingsDialog = ref(false)
const selectedNotification = ref(null)

// 分页和筛选
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const filterType = ref('')
const filterPriority = ref('')
const filterRead = ref('')

// 统计数据
const totalCount = ref(0)
const unreadCount = ref(0)
const highPriorityCount = ref(0)
const unreadCountByType = ref({})

// 通知设置
const settings = ref({
  webNotifications: true,
  emailNotifications: true,
  smsNotifications: false,
  pushNotifications: true
})

// 获取通知图标
const getNotificationIcon = (type) => {
  const iconMap = {
    SYSTEM: InfoFilled,
    APPOINTMENT: Calendar,
    HEALTH: Document,
    CHAT: ChatDotRound,
    ANALYSIS: DocumentChecked,
    SYMPTOM: DocumentChecked,
    REMINDER: Clock,
    EMERGENCY: WarningFilled
  }
  return iconMap[type] || Bell
}

// 获取优先级类型
const getPriorityType = (priority) => {
  const typeMap = {
    URGENT: 'danger',
    HIGH: 'warning',
    NORMAL: 'info',
    LOW: 'info'
  }
  return typeMap[priority] || 'info'
}

// 获取优先级文本
const getPriorityText = (priority) => {
  const textMap = {
    URGENT: '紧急',
    HIGH: '高',
    NORMAL: '普通',
    LOW: '低'
  }
  return textMap[priority] || '普通'
}

// 获取类型文本
const getTypeText = (type) => {
  const textMap = {
    SYSTEM: '系统通知',
    APPOINTMENT: '预约通知',
    HEALTH: '健康提醒',
    CHAT: '聊天消息',
    ANALYSIS: '分析报告',
    SYMPTOM: '症状评估',
    REMINDER: '用药提醒',
    EMERGENCY: '紧急通知'
  }
  return textMap[type] || '通知'
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) { // 1天内
    return `${Math.floor(diff / 3600000)}小时前`
  } else if (diff < 604800000) { // 1周内
    return `${Math.floor(diff / 86400000)}天前`
  } else {
    return date.toLocaleDateString('zh-CN')
  }
}

// 格式化数据
const formatData = (data) => {
  try {
    return JSON.stringify(JSON.parse(data), null, 2)
  } catch {
    return data
  }
}

// 加载通知列表
const loadNotifications = async () => {
  try {
    loading.value = true
    
    // 检查用户是否登录
    if (!userStore.isLoggedIn || !userStore.userInfo?.id) {
      console.error('用户未登录或用户信息无效')
      ElMessage.error('请先登录后查看通知')
      router.push('/login')
      return
    }
    
    const response = await notificationApi.getUserNotifications({
      userId: userStore.userInfo.id,
      page: currentPage.value,
      size: pageSize.value,
      type: filterType.value || undefined,
      priority: filterPriority.value || undefined,
      isRead: filterRead.value !== '' ? filterRead.value : undefined
    })
    
    if (response.success) {
      notifications.value = response.records || []
      total.value = response.total || 0
      totalCount.value = response.total || 0
    }
  } catch (error) {
    console.error('加载通知列表失败:', error)
    ElMessage.error('加载通知列表失败')
  } finally {
    loading.value = false
  }
}

// 加载统计数据
const loadStatistics = async () => {
  try {
    // 检查用户是否登录
    if (!userStore.isLoggedIn || !userStore.userInfo?.id) {
      console.error('用户未登录或用户信息无效')
      return
    }
    
    // 获取未读通知数量
    const unreadResponse = await notificationApi.getUnreadNotificationCount(userStore.userInfo.id)
    if (unreadResponse.success) {
      unreadCount.value = unreadResponse || 0
    }
    
    // 获取按类型分组的未读通知数量
    const unreadByTypeResponse = await notificationApi.getUnreadNotificationCountByType(userStore.userInfo.id)
    if (unreadByTypeResponse.success) {
      unreadCountByType.value = unreadByTypeResponse || {}
    }
    
    // 获取高优先级未读通知
    const highPriorityResponse = await notificationApi.getHighPriorityUnreadNotifications(userStore.userInfo.id)
    if (highPriorityResponse.success) {
      highPriorityCount.value = (highPriorityResponse || []).length
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 加载通知设置
const loadSettings = async () => {
  try {
    // 检查用户是否登录
    if (!userStore.isLoggedIn || !userStore.userInfo?.id) {
      console.error('用户未登录或用户信息无效')
      return
    }
    
    const response = await notificationApi.getNotificationSettings(userStore.userInfo.id)
    if (response.success) {
      settings.value = { ...settings.value, ...response }
    }
  } catch (error) {
    console.error('加载通知设置失败:', error)
  }
}

// 处理未读卡片点击
const handleUnreadCardClick = () => {
  // 清除其他筛选条件
  filterType.value = ''
  filterPriority.value = ''
  // 设置为只显示未读消息
  filterRead.value = false
  // 重置到第一页
  currentPage.value = 1
  // 重新加载通知列表
  loadNotifications()
  ElMessage.success('已筛选显示未读消息')
}

// 处理通知点击
const handleNotificationClick = (notification) => {
  selectedNotification.value = notification
  showDetailDialog.value = true
  
  // 如果是未读通知，自动标记为已读
  if (!notification.isRead) {
    markAsRead(notification.id)
  }
}

// 标记为已读
const markAsRead = async (notificationId) => {
  try {
    const response = await notificationApi.markAsRead(userStore.userInfo.id, notificationId)
    if (response.success) {
      // 更新本地数据
      const notification = notifications.value.find(n => n.id === notificationId)
      if (notification) {
        notification.isRead = true
        notification.readAt = new Date().toISOString()
      }
      
      // 更新统计数据
      unreadCount.value = Math.max(0, unreadCount.value - 1)
      
      ElMessage.success('已标记为已读')
    }
  } catch (error) {
    console.error('标记已读失败:', error)
    ElMessage.error('标记已读失败')
  }
}

// 标记为已读并关闭对话框
const markAsReadAndClose = async () => {
  if (selectedNotification.value) {
    await markAsRead(selectedNotification.value.id)
    selectedNotification.value.isRead = true
    selectedNotification.value.readAt = new Date().toISOString()
  }
  showDetailDialog.value = false
}

// 全部标记为已读
const markAllAsRead = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要将所有通知标记为已读吗？',
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await notificationApi.markAllAsRead(userStore.userInfo.id, filterType.value || undefined)
    if (response.success) {
      // 更新本地数据
      notifications.value.forEach(notification => {
        if (!notification.isRead) {
          notification.isRead = true
          notification.readAt = new Date().toISOString()
        }
      })
      
      unreadCount.value = 0
      ElMessage.success(`已标记 ${response} 条通知为已读`)
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('全部标记已读失败:', error)
      ElMessage.error('全部标记已读失败')
    }
  }
}

// 删除通知
const deleteNotification = async (notificationId) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条通知吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await notificationApi.deleteNotification(userStore.userInfo.id, notificationId)
    if (response.success) {
      // 从列表中移除
      const index = notifications.value.findIndex(n => n.id === notificationId)
      if (index > -1) {
        const notification = notifications.value[index]
        notifications.value.splice(index, 1)
        
        // 更新统计数据
        totalCount.value--
        if (!notification.isRead) {
          unreadCount.value--
        }
      }
      
      ElMessage.success('删除成功')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除通知失败:', error)
      ElMessage.error('删除通知失败')
    }
  }
}

// 批量删除
const batchDelete = async () => {
  if (selectedNotifications.value.length === 0) {
    ElMessage.warning('请选择要删除的通知')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedNotifications.value.length} 条通知吗？`,
      '确认批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await notificationApi.batchDeleteNotifications(userStore.userInfo.id, selectedNotifications.value)
    if (response.success) {
      // 从列表中移除
      const deletedIds = new Set(selectedNotifications.value)
      const deletedNotifications = notifications.value.filter(n => deletedIds.has(n.id))
      notifications.value = notifications.value.filter(n => !deletedIds.has(n.id))
      
      // 更新统计数据
      totalCount.value -= response
      const deletedUnreadCount = deletedNotifications.filter(n => !n.isRead).length
      unreadCount.value -= deletedUnreadCount
      
      selectedNotifications.value = []
      ElMessage.success(`删除了 ${response} 条通知`)
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 处理操作
const handleAction = () => {
  if (selectedNotification.value?.actionUrl) {
    router.push(selectedNotification.value.actionUrl)
    showDetailDialog.value = false
  }
}

// 保存设置
const saveSettings = async () => {
  try {
    const response = await notificationApi.updateNotificationSettings(userStore.userInfo.id, settings.value)
    if (response.success) {
      ElMessage.success('设置保存成功')
      showSettingsDialog.value = false
    }
  } catch (error) {
    console.error('保存设置失败:', error)
    ElMessage.error('保存设置失败')
  }
}

// 分页处理
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  loadNotifications()
}

const handleCurrentChange = (page) => {
  currentPage.value = page
  loadNotifications()
}

// 监听筛选条件变化
watch([filterType, filterPriority, filterRead], () => {
  currentPage.value = 1
  loadNotifications()
})

// 页面加载
onMounted(async () => {
  await Promise.all([
    loadNotifications(),
    loadStatistics(),
    loadSettings()
  ])
})
</script>

<style scoped>
.notification-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.mobile-layout {
  padding-top: 70px;
}

.notification-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-left h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
}

.notification-loading {
  padding: 20px;
}

/* 统计卡片 */
.stats-section {
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-card.total .stat-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card.unread .stat-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.high-priority .stat-icon {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #e67e22;
}

.stat-card.clickable {
  cursor: pointer;
  transition: all 0.3s ease;
}

.stat-card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-card.clickable:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
  margin-top: 4px;
}

/* 操作栏 */
.actions-section {
  margin-bottom: 24px;
}

.actions-bar {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-group {
  display: flex;
  gap: 12px;
}

/* 通知列表 */
.notifications-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
}

.notifications-list {
  padding: 0;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: #f8f9fa;
}

.notification-item.unread {
  background: #f8f9ff;
  border-left: 4px solid #409eff;
}

.notification-item.high-priority {
  border-left: 4px solid #f56c6c;
}

.notification-item.selected {
  background: #e6f7ff;
}

.notification-checkbox {
  margin-top: 4px;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  flex-shrink: 0;
  margin-top: 4px;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 16px;
}

.notification-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.4;
}

.notification-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.notification-time {
  font-size: 12px;
  color: #999;
}

.notification-text {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-actions {
  display: flex;
  gap: 8px;
}

/* 分页 */
.pagination-wrapper {
  padding: 20px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #f0f0f0;
}

/* 对话框 */
.notification-detail {
  padding: 0;
}

.detail-header {
  margin-bottom: 16px;
}

.detail-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.detail-time {
  font-size: 14px;
  color: #999;
}

.detail-content {
  margin-bottom: 16px;
}

.detail-content p {
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.detail-data {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.detail-data h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
}

.detail-data pre {
  margin: 0;
  font-size: 12px;
  color: #333;
  white-space: pre-wrap;
  word-break: break-all;
}

.detail-footer {
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.detail-status {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #666;
}

.notification-settings {
  padding: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-group,
  .action-group {
    justify-content: center;
  }
  
  .notification-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .notification-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .notification-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .detail-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .detail-status {
    flex-direction: column;
    gap: 8px;
  }
}
</style>